Hace algún tiempo me quitaba una espinita que tenía clavada, era sobre el tema "Transparencias" y sobre ese tema tenía una entrada pendiente que Sidhe and Darky me recordaba el otro día.
Se trataba de añadir transparencia a todo el contenido del blog en lugar de hacerlo en main y sidebar como en la otra ocasión.
La cuestión es simple si antes añadíamos dos columnas de transparencia ahora lo haríamos con una.
Lo primero de todo es añadir una imagen de fondo, en Edición de HTML localizamos body { y añadimos la imagen de esta forma: background:url('url-imgen');
El resultado sería algo así:


Vamos a cubrir main y sidebar con la misma transparencia y nos vamos a situar justo antes de ]]></b:skin> para añadir lo siguiente:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background:#0873dd/* color de la transparencia */
opacity: 0.25;   /* aumentar-disminuir transparencia */
-moz-opacity: 0.25;  /* aumentar-disminuir transparencia */
filter:alpha(opacity=25);   /* For IE6&7 */ /* aumentar-disminuir transparencia */
}
.container {
position: relative;
float: left;
}
.content {
position: relative;   /* Fixes the z-index */
float: left;
}

#column-1 {   /* ampliar transparencia */
width: 780px;   
}
#column-1 .content {  /* contenido de la transparencia */
padding: 20px;
width: 800px;
}
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay { 
height:expression(document.getElementById("column1").offsetHeight); }
* html #column-2 .overlay { 
height:expression(document.getElementById("column2").offsetHeight); }

A continuación  nos situamos en <div id='header-wrapper'> justo antes añadimos:
<div class='container' id='column-1'>
<div class='overlay'/>
<div class='content'>

Por último nos vamos al final de la plantilla y justo antes de </body> añadimos:
</div>
</div>

Con eso lo que hicimos fue crear un bloque desde el header hasta el final de body ese bloque será el que contiene la transparencia y el color que añadiremos.


Si miráis en vista previa seguramente estará todo deformado eso es porque no coinciden las medidas y  hay que modificarlas porque como es lógico todas las plantillas no son iguales.
La que puse para el ejemplo tiene width:800px; en outer-wrapper.

Lo que haremos será mirar nuestra plantilla y la misma medida que tiene en outer-wrapper añadirla en #column-1 .content { ¿por qué? porque es el total del contenido, si añadiéramos más empujaría el contenido de nuestra sidebar y se desplazaría hasta perderse. Si añadimos menos no le dejamos espacio y la desplazaría hasta abajo. De todas formas no hay números exactos podéis probar y mirar en vista previa el resultado.

En #column-1 { hay de width: 780px; su trabajo es extender la transparencia hasta cubrir el contendido de main y sidebar lo calculamos considerando la suma de main-wrapper y sidebar-wrapper incrementando por ejemplo 80 para los extremos.
Un ejemplo sería:
main-wrapper:width:410px + sidebar-wrapper:width:220 + 80px = column-1:width: 710px;

Anónimo

Hola, lo primero es decir q me encanta tu blog.

He llegado casualmente al blog "Mangas verdes" y he encontrado un par de cosas interesantes. El blog es de wordpress, pero me gustaría saber si es adaptable a blogger.

La primera aparece en esta entrada:
http://mangasverdes.es/2009/01/22/convierte-tu-blog-en-un-widget/

La segunda, es sobre los comentarios. Si te fijas, permite q al hacer un comentario aparezca en él el ultimo artículo que has escrito en tu blog.

Un saludo

Responder
Flores Literarias

le tengo miedo a usar transparencias soy muy torpe y cometo errores... (la ultima vez casi no me desenredo)me quedo con la resolución nítida. :D
mil abrazos y besotes mi guapetona

Responder
Jaime Trujillo Escobedo

:DQue buenas son las transparencias, y que bien lo explicas todo Gem@, la verdad es que con tus indicaciones se aprende fácilmente:)

¡¡Un abrazo!!

Responder
Tinika

¡¡¡Bien Gema!!! parece que me has leído la mente... llevo sin publicar entradas 5 días porque ando líada con cambiar la plantilla (como bien te comenté hace tiempo) y buscaba algo así a ver si esta noche por fin puede llegar a algo...

Muchas gracias por esta estupenda entrada.

P.D. Por cierto la textura de fondo negra se puede decir de donde la has sacado? He visto infinidad de páginas con texturas, pero joer ninguna termina de llenarme y ya sabes que el negro es mi favorito.
Gracias de nuevo y besotes.

Responder
Bonzu Pipinpadaloxicopolis III

En Outer-Wrapper coloqué opacity:0.96; filter:alpha(opacity=96) y se transparenta todo el blog.

Responder
Anónimo

Hola Gema!!

Ahhh... muchísimas gracias por la explicación, esto era lo que me tenía un poquito complicada :o

Lo voy a probar y te cuento!

Byeee :P

Responder
Gem@

Snake WidgetBox se puede añadir tranquilamente en Blogger, sin embargo eso que dices de los comentarios no he visto que pueda hacerse.

yz FL siempre digo lo mismo es cuestión de probar ;)

yz Gracias Jaime ;)

yz Tinika esa textura me encanta, la encontré en una página como fondo. Si te gusta la puedes descargar de aquí
De todas formas hay muchas herramientas para crear tus propias texturas, otras que ya las tienes listas para guardar. Mira en mi nube la etiqueta de "Decorar" seguro que encentras algo :)

yz Bonzu ¿si se transparenta para que tienes la opacidad? no se nota nada entonces.
Con ese código no puedes añadir transparencia sino opacidad y si disminuyes la opacidad para que se note el efecto entonces la opacidad se superpone sobre el contenido.
Con esto que explico se añade una capa de transparencia sobre el fondo y el contenido sbre la transparencia de esa forma no sólo el contenido sigue teniendo la misma calidad sino que podemos añadir el color deseado para esa transparencia.

yz Sidhe más vale tarde que nunca ;)

Responder
Anónimo

Gema mira me sigue apareciendo este problemita :((

Se superponen los títulos de las entradas y el post-footer!

Prueba Transparencia

Responder
Gem@

Sidhe tendría que verlo añadido para ver el error donde se encuentra porque con la imagen veo lo que ocurre pero no el error.
Imagino que lo estarás haciendo en el blog de pruebas....

Responder
Anónimo

Sip... te acabo de mandar un mail, para que puedas ver el blog ;)

Saludos :P

Responder
Gem@

Sidhe no se ve el código fuente completo :(

Responder
Anónimo

mmm... no te entiendo Gema ¿A qué te refieres? :O

Responder
Gem@

Me refiero que el código fuente no se puede ver :( no sé si es porque se trata de un blog privado o por otro motivo.

Responder
Anónimo

Qué raro!!

¿Y si mejor te envio la plantilla? :S

Responder
Gem@

Mándala Sidhe pro hasta mañana no podré verla aquí ya es madrugada ;)

Responder
Anónimo

Hola Gemma ! , me hice otro blog , y lo quiero oculto , ya lo he separado del otro , pero parece que no és posible , poner un perfil distinto , con una foto distinta , cada vez que lo canvio , tambié se canvia en el otro ..
!Saludos ! y gracias de antemano por responderme

Responder
Deybi

Hola Gem@.

Gracias por este otro truco gemo, me ha gustado mucho, como que queda mejor que el anterior, así todo uniforme!.

Un abrazo y suerte...

Responder
Gem@

El perfil va relacionado con la cuenta y no con el blog Tresa, puedes suprimirlo y crear uno para añadirlo en un gadget de html.
Con el mismo editor de entradas puedes hacerlo ;)

yz Gracias Birdelo me alegra que te guste ;)

Responder
Anónimo

:P dime tesoro, cuando puedas, se ven los cambios en IE 6???...bien sigo tratando!!! besos

Responder
Deybi

@Graciela.

Mamá y tú usas el IE6, me da penita :$.

Responder
Gem@

Graciela de Palomas hace tiempo que no uso IE6 en realidad sólo uso IE8 y sólo para comprobar posibles errores.
Pero si te refieres a los cambios en las transparencias mi respuesta es que se ve igual en Firefox que IE8 :)

yz Birdelo :)

Responder
Deybi

Es que eso de IE6 no sirve ni para jugar, porque hasta allí da muchos errores, otra mier...coles es Safari, me dicen que solo funciona bien y no da errores cuando está justo con su MAC!.

Responder
Anónimo

Hola Gemma !
Entonces , puedo empezar con una cuenta diferente , lo volveré a probar , es que soy muy novata !
Muchas gracias !

Responder
Anónimo

:)Gem@ y Birdelo: pregunto si se vén bien jajaja porque algo estoy haciendo mal...ni una imágen salía ayer. Estaba totalmente concentrada, SOLA sin que digan mamá, mami...jajaja no sientas pena :S tremenda locura me dió cuando ví que me habían engañado...bien Gem@ sigo probando...BESOS!!!

Responder
Gem@

Birdelo te siguen llegando mis actualizaciones de FeedBurner?

yz Tresa si creas un blog con una cuenta diferente no lo tendrás en escritorio junto al otro blog. Sería una cuenta independiente con blog independiente no sé si me explico...

yz Suerte Graciela ;)

Responder
Anónimo

Gema, pásate por el blog que un regalito lleva tu nombre y te está esperando muy ansioso ;)

Kisses

Responder
Tinika

Gema estoy ¡¡por fin!! tocando el tema este del fondo y de la transparencia pero tengo una duda, he ampliado del lado derecho donde está la sidebar y bien, pero del lado izquierdo me queda mucho trozo negro y quisiera que quedara como en el lado derecho, se puede hacer?

Gracias por tu ayuda

P.D. Te dejo permiso activado para que entres en el blog de pruebas, se llama www.tinikapruebas.blogspot.com

Responder
Gem@

Sidhe me pasé por allá y te dejé un comentario, también te he mandado un mail respecto a la plantilla ;)

yz Tinika si ocupas todo el ancho del blog sin dejar un espacio para ver la imagen de fondo la transparencia no se percibe es como si añadieras una imagen de fondo de un color diferente. No sé si me explico...

Responder
Anónimo

Hola ! Muchas gracias Gemma !
!saludos!
Tresa

Responder
Gem@

De nada Tresa no sé si me expliqué bien pero cualquier cosa ya me dices algo ;)

Responder
Unknown

gema estoy teniendo problemas con mi transparencia.. Al final del blog la transparencia se desliza sobre mi imagen final y no se como cambiarlo :S si puedieras echar un vistaso.. http://juugodeanana.blogspot.com te lo agradezco

Responder
Gem@

yz Hola Loree siento la demora en contestar... :(
Verás para que la transparencia no llegue al final debes añadir el cierre justo después de </b:section>
</div>

Mira esta entrada:
http://gemablog-.blogspot.com/2008/09/transparecias.html
donde dice:
"Donde los puntos suspensivos es el código que cada uno podemos tener, debemos prestar atención y comprobar que añadimos"

</div>
</div>
justo donde termina:
</b:section>
</div>

Responder
Amunt Dones

Hola Gema, estoy diseñando nuestro blog y he usado varios de tus consejos para modificar la plantilla; pero tengo un problema..

Este es el blog http://amuntdones.blogspot.com/. He creado el fondo en bg patterns y luego lo modifique con photoshop. Le adicione transparencias y le disminui la opacidad en el fondo blanco. Pero no se como hacer para que me quede la parte blanca más arriba y centrada.
Gracias por tu ayuda.

Responder
Addfo

Grasias, si me funciono, pero lo usare en un futuro para mi blog.

Responder
Gem@

yz Amunt Dones para subirlo busca outer-wrapper y donde dice margin:0; sustituyelo por margin:-10px auto 0;
El motivo de no estar centrado es por los valores de la transparencia prueba a disminuir el ancho en column-1 mirando en vista previa hasta dar con el centrado.

yz Gracias a ti Addfo ;)

Responder
Anónimo

¡Hola Gema!

Tengo un pequeño problema con las transparencias: no puedo integrar la cabecera con la transparencia.

Como una imagen vale mas que mil palabras, ahí te dejo la url de mi blog de prueba:

http://praus-blogdeprueba.blogspot.com/

¿Habré hecho algo mal? ¿Será incorrecto el formato de la imagen? Espero tu respuesta.

¡Mil gracias! Y enhorabuena por tu blog ;)

Responder
Gem@

yz Praus si te fijas en tu plantilla dice:
<div class='container' id='column-1'>
<div class='overlay'></div>
<div class='content'>

<div id='header-wrapper'>
Ese </div> que cierra no debe estar ahí sino al final justo antes de </body>

Responder
Anónimo

Lo acabo de mirar ahora mismo, quizá me he confundido pero en mi plantilla pone:

div class='container' id='column-1'
div class='overlay'
div class='content'
div id='header-wrapper'

No hay ningun /div cerrando nada ó.o

Responder
Gem@

yz Praus añade un color que resalte la transparencia y la opacidad ponla a 0.25; Veremos de esa forma hasta donde cubre porque ahora casi no se percibe :O

Responder
Anónimo

Ya esta hecho, aquí lo tienes:

http://praus-blogdeprueba.blogspot.com/

Tan solo quiero integrar la cabecera con la transparencia, no comprendo porque me queda a parte.

Saludos y gracias^^

Responder
Gem@

yz Ahora se ve bien pero sigo viendo un div cerrado :O
<div class='container' id='column-1'>
<div class='overlay'></div>
<div class='content'>
Si quieres mándame la plantilla al correo y en asunto pon transparencias ;)

Responder
Celeste

Hola Gema! Hice todos los pasos pero tengo un problema, me queda mas espacio del lado izquierdo que del derecho.

O sea más espacio con el color de fondo.

Aca esta el link de mi blog por si me podés ayudar:

http://jardindearte.blogspot.com/

gracias por anticipado!

Responder
Gem@

:: Hola Celeste, prueba dando a outer-wrapper en lugar de width: 900px un poquito más a width: 930px y mira en vista previa ;)

Responder
Celeste

gracias! Aumenté el outer-wrapper y quedó bien ahora. Muchas gracias nuevamente!!

Responder
Gem@

:: Estupendo Celeste :)

Responder
Templo Espiritualista Trinitario de Annan

HOLA GEM@... Muchas gracias. Fíjate que al final de las soluciones que me diste me decidí por esta solución de transparencias y cómo siempre, tenías razón. :)

El detalle es el siguiente, utilizé las etiquetas cómo categorías en la sidebar. La cosa es que las transparencias en algúnas entradas de esas "categorías" se vuelven completamente sólidas. es muy extraño. Pienso que será un error del explorer... ni idea.

Me podrías ayudar por favor Gem@?

Gracias infinitas. :)

Atte. Rodrigo Fernández de Córdova

este es el blog: templodeannan.blogspot.com
Bendiciones Gemit@...

Responder
Gem@

:: Templo Espiritualista Trinitario de Annan yo lo veo fantástico, de la misma forma con Explorer que con Firefox ¿no será que necesita actualizar el navegador? el que yo estoy usando es Explorer8

Responder
Templo Espiritualista Trinitario de Annan

Si!!... era el explorador :P !!!UN MILLÓN DE GRACIAS!!! y gracias por visitar el Blog Gemit@.. :D

Responder
Gem@

:: Estupendo me alegra que esté resuelto :D
Gracias por venir a comentarlo.

Responder
Gra

Ay querida Gema...no entendi mucho....Quisiera hacer una plantilla como la Windows de Josh Peterson (con transparencia en el outer-wrapper, verdad??) a base de la minima...alguna pista?
Saludos!!!!

Responder
Gem@

:: Hola Gra, hay otras formas de añadir transparencia y una es añadiendo una imagen como bien dices en outer-wrapper
#outer-wrapper{
background:url(url-imagen-transparente);

En esta página verás distintas imágenes con transparencia y color:
http://gemablog-.blogspot.com/2009/12/imagen-transparente-de-fondo.html

Responder
Gra

Gracias por responder!!!!!....Me animo a probar!!!..luego te cuento!!!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top